Vue.component('questionComponent', {
    template: '<div class="panel panel-default">\n' +
    '    <div class="panel-heading text-center" role="tab">\n' +
    '        <h4 class="panel-title">\t\n' +
    '        \t<a role="button " data-toggle="collapse" data-parent="#question-answer" href="#collapseOne"\n' +
    '                   aria-expanded="false" aria-controls="collapseOne">\n' +
    '                   测试\n' +
    '                </a>\n' +
    '\t\t</h4>\n' +
    '    </div>\n' +
    '    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel">\n' +
    '        <div class="panel-body">\n' +
    '            <div class="question-title-text">\n' +
    '                <p class="text-info">题干</p>\n' +
    '                <img src="#" alt="题目图片">\n' +
    '                <hr>\n' +
    '            </div>\n' +
    '            <div class="question-answer-text">\n' +
    '                <textarea class="textarea-answer form-control text-primary bg-success" onkeyup="Preview.Update()"  v-bind:id="qesId">\n' +
    '                </textarea>\n' +
    '                <hr>\n' +
    '            </div>\n' +
    '            <div class="question-answer-img text-center">\n' +
    '                <div :id="mathPreviewId"></div>\n' +
    '                <div :id="mathBufferId"></div>\n' +
    '                <hr>\n' +
    '            </div>\n' +
    '            <div class="question-keyboard row">\n' +
    '                <button type="button"  class="btn btn-info  col-md-1"><img src="" class="img-responsive center-block"></button>\n' +
    '            </div>\n' +
    '        </div>\n' +
    '    </div>\n' +
    '</div>',
    props: ['qesId','mathPreviewId','mathBufferId'],
    data: function() {
        return {

        }
    }
})
var test = new Vue({
    el: '#question-answer',
    data: {
        questionID: 'MathInput',
        mathPreviewId:'MathPreview',
        mathBufferId:'MathBuffer'
    },
    methods: {
        //插入textarea框值
        insertOrder: function(order, elementSelf) {

            elementSelf = elementSelf.currentTarget;
            elementSelf = elementSelf.parentNode.parentNode.getElementsByTagName('textarea')[0]; //this textarea

            var rangeData = this.getFocusPosition(elementSelf);
            //
            var position = order.search('{') + 1 + rangeData.start;
            console.log(order);
            var s1 = elementSelf.value.slice(0, rangeData.start);
            var s2 = elementSelf.value.slice(rangeData.end);
            /*如果start!=end 将替换点被选中部分*/
            var s3 = s1 + order + s2;
            elementSelf.value = s3;

            var imgEle = elementSelf.parentNode.nextSibling;
            if (imgEle.nodeType == 3) { //#text
                imgEle = imgEle.nextSibling;
            }
            imgEle = imgEle.getElementsByTagName('img')[0];
            var s = document.getElementsByClassName("textarea-answer");
            // test.$data.json[0].answerImageURL=test.$data.url+s3;  这个事件会引发watch 会更改textarea中的值为空
            for (var i = 0; i < s.length; i++) {
                if (s[i] == elementSelf) {
                    test.$data.json[i].answerContent = s3; //elementSelf.value
                    console.log(s3);
                    console.log(elementSelf.value);
                    break;
                }
            }
            if (document.selection) {
                var sel = elementSelf.createTextRange();
                sel.moveStart('character', position);
                sel.collapse();
                sel.select();
            } else if (typeof elementSelf.selectionStart == 'number' && typeof elementSelf.selectionEnd == 'number') {
                elementSelf.selectionStart = elementSelf.selectionEnd = position;
            }
        },
        //获取光标位置
        getFocusPosition: function(element) {
            var rangeData = { text: "", start: 0, end: 0 };
            element.focus();
            if (element.setSelectionRange) { // W3C
                rangeData.start = element.selectionStart;
                rangeData.end = element.selectionEnd;
                rangeData.text = (rangeData.start != rangeData.end) ? element.value.substring(rangeData.start, rangeData.end) : "";
            }
            return rangeData;
        }
    },
    //初始加载
    mounted: function() {
        this.$nextTick(function() {
            // 代码保证 this.$el 在 document 中
            // forecthis.json.length;
            //将json中的answerContent暂存在temp中
            for (var i = 0; i < this.json.length; i++) {
                this.json[i].collapseDivId.a = '#collapse' + i;
                this.json[i].collapseDivId.id = 'collapse' + i;
                this.temp[i] = this.json[i].answerContent;
            }
        })
    },
    watch: {
        //只能在键盘输入时触发
        json: {
            handler: function(value) {
                for (var i = 0; i < value.length; i++) {
                    if (value[i].answerContent != test.$data.temp[i]) {
                        test.$data.json[i].answerImageURL = test.$data.url + value[i].answerContent;
                        test.$data.temp[i] = value[i].answerContent;
                    }
                }
            },
            deep: true
        }

    }
})

